<template>
  <div class="header-container">
    <div class="icon-container"
         style="cursor: pointer">
      <Expand v-if="menuStore.isCollapsed"
              @click="toggleMenu"
              class="icons" />
      <Fold v-else
            @click="toggleMenu"
            class="icons" />
      <div class="breadcrumb">
        <div v-for="(item, index) in breadcrumbItems"
             :key="index"
             class="breadcrumb-item">
          <template v-if="index > 1">
            <div class="spanTitle"> / </div>
          </template>
          <div v-if="index > 0"
               :to="item.to"
               class="spanTitle">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <div class="avatar-container">
      <img src="../assets/logo.jpg"
           alt=""
           class="avatar" />
      <el-dropdown @command="handleCommand"
                   class="dropdown">
        <span class="username">
          {{ username }}<el-icon>
            <ArrowDown />
          </el-icon>
        </span>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { ref, computed, getCurrentInstance } from "vue";
import { useMenuStore } from "@/store/userStore.js";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "HeaderA",
  setup () {
    const menuStore = useMenuStore();
    const username = ref(JSON.parse(localStorage.getItem("userInfor")).userName || 'admin');
    const route = useRoute();
    const app = getCurrentInstance()?.proxy;
    const handleCommand = (command) => {
      if (command === "logout") {
        app.$get('/sysuser/manager/logout').then(res => {
          // ElMessage.success('已退出')
          localStorage.clear();
          window.location = "/login"; // 或使用 router.push('/login')
        })
      }
    };
    function toggleMenu () {
      menuStore.toggleMenu();
    }

    const breadcrumbItems = computed(() => {
      let matchedRoutes = route.matched;
      let breadcrumbArray = matchedRoutes.map((routeRecord) => {
        return { name: routeRecord.name, to: routeRecord.path };
      });

      return breadcrumbArray;
    });

    return { username, handleCommand, toggleMenu, menuStore, breadcrumbItems };
  },
};
</script>

<style>
.breadcrumb-item {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
}
.breadcrumb {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
}
.icons {
  width: 23px;
  height: 23px;
  margin-right: 18px;
}
.spanTitle {
  font-size: 16px;
  color: #080808;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #f3f3f3;
}

.icon-container,
.avatar-container {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.avatar {
  border-radius: 50%;
  width: 35px;
  height: 35px;
}

.username {
  cursor: pointer;
  color: #000;
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.dropdown {
  flex: 1;
  text-align: right;
}
.dropdown .username .el-tooltip__trigger :hover {
  border: none;
}
</style>
